@extends('back.adminbase')
@section('content')
    <section class="hbox stretch">
        @include("back.public.left")
        <aside>
            <section class="vbox">
                <header class="header bg-white b-b clearfix">
                    <form class="talbe-search" method="get" action="{{url('admin/function')}}">
                        <div class="row m-t-sm">
                            <div class="col-sm-9 m-b-xs">
                                <a role="button" class="btn btn-sm btn-primary sc-opt" >生成
                                    <i class="glyphicon"></i>
                                </a>
                            </div>
                        </div>
                    </form>
                </header>
                <div class="tc-bgg"></div>

                <div class="tc-dv tc-dv-sc">
                    <p>请输入生成数据：</p>
                    <div class="clearfix">
                        <span>生成数量:</span>
                        <a class="reduce" id="reduce">-</a>
                        <input type="text" name="cardNum" id="cardNum" value="2">
                        <a class="add" id="add">+</a>
                    </div>
                    <p class="opt-btn">
                        <a href="javascript:void(0)" class="qd-btn">确定</a>
                        <a href="javascript:void(0)" class="qx-btn">取消</a>
                    </p>
                </div>

                {{--select框--}}
                <div class="downlist">
                    <p>请选择尺寸：</p>
                    <div class="clearfix">
                        <select name="size" id="picsize">
                            <option value ="8">8</option>
                            <option value ="12">12</option>
                            <option value="15">15</option>
                            <option value="30">30</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                    <p class="opt-btn">
                        <a href="javascript:void(0)" class="down-btn">确定</a>
                        <a href="javascript:void(0)" class="cancel-btn">取消</a>
                    </p>
                </div>




                <section class="scrollable  wrapper w-f">
                    <section class="panel panel-default">
                        <div class="table-responsive">
                            <table class="table table-hover m-b-none entity-view" data-path="/attendance/count/countDetail/id/{0}">
                                <thead>
                                <tr>
                                    <th style="text-align: center;">序号</th>
                                    <th style="text-align: center;">编码</th>
                                    <th style="text-align: center;">门状态</th>
                                    {{--<th style="text-align: center;">有无书</th>--}}
                                    <th style="text-align: center;">生成时间</th>
                                    <th style="text-align: center;">柜门二维码</th>
                                    <th style="text-align: center;">操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                @foreach ($res as $k=>$v)
                                        <tr>
                                        <td style="text-align: center;">{{$limit*($res->currentPage()-1)+$k+1}}</td>
                                        <td style="text-align: center;">{{$v->code}}</td>
                                        <td style="text-align: center;">{{\App\Util\doorStatus::getLabel($v->status)}}</td>
                                        {{--<td style="text-align: center;">@if(!empty($v->book_status)){{ '有' }} @else {{'无'}} @endif</td>--}}
                                        <td style="text-align: center;">{{\App\Util\TimeHelper::formatDateTime($v->created_at)}}</td>
                                            <?php
                                            if(($v->type)==2){ ?>
                                            <td style="text-align: center;"></td>
                                            <?php  }else{ ?>
                                             <td style="text-align: center;"><img class="qr_code" src="{{env('APP_URL')}}/uploads/qrcode{{$v->code}}.png"></td>
                                            <?php  } ?>


                                            <td style="text-align: center">
                                            <a href="{{ url('back/shelf/doorBooks/'.$v->id)}}" class="label label-success">查看</a>
                                            <?php
                                            if(($v->type) ==1){
                                                ?>
                                            <a class="label label-success qr-download" btn-value="{{$v->code}}">下载二维码</a>
                                            <?php  } ?>

                                            <img class="qr_img" src= "" download="" />

                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </section>
                    <div style="text-align: center">{!! $res->appends($_GET)->render() !!}</div>
                </section>

            </section>
        </aside>
    </section>

@endsection

@section('addscript')
    <script>
        $(function(){
            $(".del").click(function(){
                var url=$(this).attr("data-back");
                layer.confirm('您确定删除吗？', {
                    btn: ['确认','取消'] //按钮
                }, function(){
                    $.ajax({
                        'url':url,
                        'type':"get",
                        'dataType':'json',
                        'success':function(data){
                            if(data.success){
                                layer.alert("删除成功！",function(){
                                    location.reload();
                                });
                            }else{
                                layer.alert(data.msg)
                            }
                        }
                    })
                }, function(){

                })
            })
        });


        //生成弹窗
        $(".qr-download").click(function(){
            window.code=$(this).attr("btn-value");
            $(".downlist").show();
            //下载图片弹窗


        });

        $(".down-btn").click(function(){
            var size=$('#picsize').val();
            var img_src = "{{env('APP_URL')}}/uploads/qrcode"+code+"_"+size+".png";
            oDownLoad(img_src);
        });

        //关闭弹窗
        $(".cancel-btn").click(function(){
            $(".downlist").hide();
        });

        function oDownLoad(url) {
            if (myBrowser()==="IE"||myBrowser()==="Edge"){
                SaveAs5(url);
            }else{
                download(url);
            }
        }

        //判断浏览器类型
        function myBrowser(){
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isOpera = userAgent.indexOf("Opera") > -1;
            if (isOpera) {
                return "Opera"
            }; //判断是否Opera浏览器
            if (userAgent.indexOf("Firefox") > -1) {
                return "FF";
            } //判断是否Firefox浏览器
            if (userAgent.indexOf("Chrome") > -1){
                return "Chrome";
            }
            if (userAgent.indexOf("Safari") > -1) {
                return "Safari";
            } //判断是否Safari浏览器
            if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                return "IE";
            }; //判断是否IE浏览器
            if (userAgent.indexOf("Trident") > -1) {
                return "Edge";
            } //判断是否Edge浏览器
        }


        //IE浏览器图片保存本地
        function SaveAs5(imgURL)
        {
            var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");
            for( ; oPop.document.readyState != "complete";)
            {
                if (oPop.document.readyState == "complete") break;
            }
            oPop.document.execCommand("SaveAs");
            oPop.close();
        }

        //谷歌，360极速等浏览器下载
        function download(src) {
            var $a = document.createElement('a');
            $a.setAttribute("href", src);
            $a.setAttribute("download", "");
            $a.click();
        };

        //生成弹窗
        $(".sc-opt").click(function(){
            $(".tc-bgg,.tc-dv-sc").show();
            return false;
        });
        //关闭弹窗
        $(".qx-btn,.tc-bgg").click(function(){
            $(".tc-bgg,.tc-dv-sc,.tc-dv-dc").hide();
        });
        //确定生成
        $(".qd-btn").click(function(){
            var num = $("#cardNum").val();
            if(confirm("确认生成吗？")) {
                var index = layer.load(1);
                $.ajax({
                    url: "{{ url('back/shelf/yieldDoors') }}",
                    type: "post",
                    dataType: "json",
                    data: {num: num,sid:"{{$id}}",number:"{{$number}}" },
                    success: function (data) {
                        layer.close(index);
                        if (data.success) {
                            window.location.href=location.href;
                        }
                        else {
                            layer.alert(data.msg);
                        }
                    }
                })
            }
        })
    </script>
    <style>
        .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
        .clearfix{zoom:1;}
        .tc-bgg{
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.5;
            filter:alpha(opacity=50);
            -moz-opacity:0.5;
            -khtml-opacity: 0.5;
            z-index: 10;
            display: none;
        }
        .tc-dv,.downlist{
            width: 400px;
            height: 340px;
            position: fixed;
            top: 50%;
            margin-top: -145px;
            left: 50%;
            margin-left: -200px;
            background: white;
            padding: 30px;
            z-index: 11;
            font-size: 16px;
        }

        .downlist{
            width: 300px;
            height: 300px;
            position: fixed;
            top: 50%;
            margin-top: -145px;
            left: 50%;
            margin-left: -200px;
            background: white;
            padding: 30px;
            z-index: 11;
            font-size: 16px;
        }
        .tc-dv-sc,.tc-dv-dj,.tc-dv-dc,.downlist{
            display: none;
        }
        .tc-dv div,.downlist div {
            font-size: 16px;
            margin: 25px 0px;
        }
        .tc-dv div span , .downlist div span{
            float: left;
            position: relative;
            top: 7px;
            margin-right: 15px;
        }
        .tc-dv div a , .downlist div a{
            text-align: center;
            display: inline-block;
            width: 30px;
            height: 28px;
            cursor: pointer;
            line-height: 28px;
            font-size: 20px;
            color: #999999;
            border: 1px solid #999999;
            background: #f6f6f6;
            margin: 0px;
            padding: 0px;
            float: left;
        }
        .tc-dv div input {
            background: white;
            border-top: 1px solid #999999;
            border-bottom: 1px solid #999999;
            border-left: 0px;
            border-right: 0px;
            min-width: 30px;
            max-width: 70px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            float: left;
        }
        .tc-dv div select , .downlist div select{
            height: 28px;
        }
        .tc-dv .opt-btn , .downlist .opt-btn{
            text-align: center;
        }
        .tc-dv .opt-btn a , .downlist .opt-btn a{
            background: #f2f4f4;
            color: #333333;
            padding: 5px 20px;
            border-radius: 4px;
            margin-right: 10px;
        }
        .tc-dv-dj .qsjsh{
            margin: 20px 0px;
        }
        .tc-dv-dj input{
            width: 100px;
            margin-left: 20px;
            border: 1px solid #e3e3e3;
            height: 25px;
            line-height: 25px;
            padding-left: 5px;
            border-radius: 4px;
        }
        .tc-dv-dj .opt-btn,.down-btn {
            text-align: center;
            margin-top: 25px;
        }
    </style>
@endsection
